<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>条件渲染</title>
</head>
<body>
	<!-- 可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。 -->
	<div id="app">
		<template v-if="ok">
		  	<h1>Title</h1>
		  	<p>Paragraph 1</p>
		  	<p>Paragraph 2</p>
		</template>
	</div>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data: {
				ok:true,
			}
		})
	</script>




	<!--
		不使用key
		切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder
	 -->
	<div id="app1">
		<template v-if="loginType === 'username'">
		  	<label>Username</label>
		  	<input placeholder="Enter your username">
		</template>
		<template v-else>
		  	<label>Email</label>
		  	<input placeholder="Enter your email address">
		</template>
		<button @click = "toggle">toggle login type</button>
	</div>
	<script type="text/javascript">
		var vm1 = new Vue({
			el: "#app1",
			data: {
				loginType : "username"
			},
			methods:{
				toggle: function(){
					if(this.loginType == "username"){
						this.loginType = false
					}else{
						this.loginType = "username"
					}
				}
			}
		})
	</script>





	<!--
	 	使用key可以使元素独立，不在复用
	 	每次切换时，输入框都将被重新渲染
	 -->
	<div id="app2">
		<template v-if="loginType === 'username'">
		  	<label>Username</label>
		  	<input placeholder="Enter your username" key="name">
		</template>
		<template v-else>
		  	<label>Email</label>
		  	<input placeholder="Enter your email address" key="email">
		</template>
		<button @click = "toggle">toggle login type</button>
	</div>
	<script type="text/javascript">
		var vm1 = new Vue({
			el: "#app2",
			data: {
				loginType : "username"
			},
			methods:{
				toggle: function(){
					if(this.loginType == "username"){
						this.loginType = false
					}else{
						this.loginType = "username"
					}
				}
			}
		})
	</script>

	<!-- 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。 -->
</body>
</html>